<script setup lang="ts">
import ChatAvatar from '@/components/ChatAvatar/index.vue';

const props = defineProps({
  id: {
    type: String,
    required: true,
    default: ''
  },
  unreadCount: {
    type: Number,
    required: false,
    default: 0
  },
  img: {
    type: String,
    required: true,
    default: '@/assets/icon.png'
  },
  username: {
    type: String,
    required: true,
    default: ''
  },
  text: {
    type: String,
    required: false,
    default: ''
  },
  showDel: {
    type: Boolean,
    required: true,
    default: false
  },
  isGroup: {
    type: Boolean,
    required: false,
    default: false
  },
  active: {
    type: Boolean,
    required: false,
    default: false
  }
});
const emit = defineEmits(['del']);

const confirmEvent = () => {
  emit('del', props.id);
};
</script>

<template>
  <div class="item" :class="active ? 'active' : ''">
    <el-badge :value="unreadCount" :hidden="unreadCount === 0">
      <ChatAvatar :img="img" :name="username" />
    </el-badge>

    <div class="text">
      <div><span v-if="isGroup">[群]</span>{{ username }}</div>
      <div v-if="text">
        <div>{{ text }}</div>
      </div>
    </div>
    <div class="close" v-if="showDel">
      <el-popconfirm title="确定要删除吗?" @confirm="confirmEvent">
        <template #reference>
          <i class="iconfont icon-v-guanbi1"></i>
        </template>
      </el-popconfirm>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>
